import { debounce } from '@/utils'
// import { ref } from 'vue'

export default function() {
  let $_sidebarElm = null
  let chart = null

  let $_resizeHandler = debounce(() => {
    if (chart) {
      chart.resize()
    }
  }, 100)

  function $_initResizeEvent() {
    window.addEventListener('resize', $_resizeHandler)
  }

  function $_destroyResizeEvent() {
    window.removeEventListener('resize', $_resizeHandler)
  }

  function $_initSidebarResizeEvent() {
    $_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    $_sidebarElm &&
      $_sidebarElm.addEventListener('transitionend', $_sidebarResizeHandler)
  }

  function $_sidebarResizeHandler(e) {
    if (e.propertyName === 'width') {
      $_resizeHandler()
    }
  }

  function $_destroySidebarResizeEvent() {
    $_sidebarElm &&
      $_sidebarElm.removeEventListener('transitionend', $_sidebarResizeHandler)
  }

  function initResize(data) {
    chart = data
    $_initResizeEvent()
    $_initSidebarResizeEvent()
  }

  function destroyResize() {
    $_destroyResizeEvent()
    $_destroySidebarResizeEvent()
  }

  return {
    initResize,
    destroyResize,
  }
}

// export default {
//   data() {
//     return {
//       $_sidebarElm: null,
//       $_resizeHandler: null,
//     }
//   },
//   mounted() {
//     $_resizeHandler = debounce(() => {
//       console.log(chart)
//       if (chart) {
//         chart.resize()
//       }
//     }, 100)
//     $_initResizeEvent()
//     $_initSidebarResizeEvent()
//   },
//   beforeDestroy() {
//     $_destroyResizeEvent()
//     $_destroySidebarResizeEvent()
//   },
//   // to fixed bug when cached by keep-alive
//   // https://github.com/PanJiaChen/vue-element-admin/issues/2116
//   activated() {
//     $_initResizeEvent()
//     $_initSidebarResizeEvent()
//   },
//   deactivated() {
//     $_destroyResizeEvent()
//     $_destroySidebarResizeEvent()
//   },
//   methods: {
//     // use $_ for mixins properties
//     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
//     $_initResizeEvent() {
//       window.addEventListener('resize', $_resizeHandler)
//     },
//     $_destroyResizeEvent() {
//       window.removeEventListener('resize', $_resizeHandler)
//     },
//     $_sidebarResizeHandler(e) {
//       if (e.propertyName === 'width') {
//         $_resizeHandler()
//       }
//     },
//     $_initSidebarResizeEvent() {
//       $_sidebarElm = document.getElementsByClassName(
//         'sidebar-container'
//       )[0]
//       $_sidebarElm &&
//         $_sidebarElm.addEventListener(
//           'transitionend',
//           $_sidebarResizeHandler
//         )
//     },
//     $_destroySidebarResizeEvent() {
//       $_sidebarElm &&
//         $_sidebarElm.removeEventListener(
//           'transitionend',
//           $_sidebarResizeHandler
//         )
//     },
//   },
// }

/********************************
 * 测试使用的代码
 */
